<template>
  <div class="wrap">
    <x-header title="转账"></x-header>
    <div class="wrapper" ref="wrapper">
      <group title="转账" label-width="5.5em" label-margin-right="2em" label-align="justify">
        <x-input title="收款人账号" v-model="postform.tradingUserName"></x-input>
        <x-input title="转账金额" v-model.number="postform.transferAmount"></x-input>
        <x-button type="primary" action-type="button" @click.native="sure">确认</x-button>
      </group>
      <group title="转账明细">
        <selector ref="defaultValueRef" @on-change="change" direction="left" title="选择时间" :options="monthList" v-model="selMonth"></selector>
        <ul class="content">
            <li v-for="item in fList" :key="item.id">
              <p class="p1"><span>{{item.uBusinessTypeName}}</span><span>{{item.tradingName}}</span><span>{{item.changedAmount}}</span></p>
              <p class="p2"><span>{{item.creationTime | moment}}</span><span>变化前:{{item.beforeChangedAmount}}</span><span>余额:{{item.afterChangedAmount}}</span></p>
            </li>
        </ul>
      </group>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import { Selector, XHeader, Group, XTextarea, XInput, XButton } from 'vux'
import { Toast } from 'mint-ui'
import { Transfer, GetUserFinancialPageList } from '@/api/user'
import moment from 'moment'

export default {
  components: {
    XHeader,
    Group,
    XInput,
    XButton,
    XTextarea,
    Selector
  },
  data() {
    return {
      postform: {
        tradingUserName: '',
        transferAmount: ''
      },
      q: {
        sorting: '',
        startPage: 1,
        pageCount: 10000,
        startDate: '',
        endDate: '',
        userId: 0,
        uBusinessType: 1
      },
      fList: [{}],
      selMonth: '',
      monthList: []
    }
  },
  methods: {
    setMonth() {
      var mt = moment('2018-04-01')
      do {
        this.monthList.unshift(mt.format('YYYY-MM'))
        mt = mt.add(1, 'months')
      } while (mt.isBefore(new Date()))
      this.selMonth = this.monthList[0]
    },
    sure() {
      var _this = this
      Transfer(_this.postform).then(result => {
      }).catch(response => {
      })
    },
    change() {
      this.getlist()
    },
    getlist() {
      var _this = this
      _this.q.startDate = _this.selMonth + '-01'
      _this.q.endDate = moment(_this.q.startDate).add(1, 'months').format('YYYY-MM-DD')
      GetUserFinancialPageList(_this.q).then(result => {
        console.log(result)
        if (result.data.items.length > 0) {
          _this.fList = result.data.items
        } else {
          _this.fList = []
          Toast('没有数据')
        }
      })
    }
  },
  mounted() {
    // 滚动
    this.scroll = new BScroll(this.$refs.wrapper, { click: true })
  },
  created() {
    this.setMonth()
    this.getlist()
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.wrap{
  height: 100%;
  .vux-header{
    z-index: 2;
  }
  .wrapper{
    height: calc(100% - 58px);
    border-top: 1px solid #ffffff;
    .content{
      button.weui-btn{
        width: 80%;
        margin: 20px auto;
      }
      li{
        padding: 5px 15px;
        border-bottom: 1px solid #dddddd;
        p{
          span{
            display: inline-block;
            width: 32%;
            text-align: left;
            font-size: 14px;
          }
        }
        .p1{
          span:nth-child(2){
            color: #aaaaaa;
          }
        }
        .p2{
          span{
            color: #aaaaaa;
          }
        }
      }
    }
  }
}
</style>
